<template>
  <div class="cashDeposit">
    <el-form
      ref="refruleForm"
      :model="ruleForm"
      :rules="rules"
      label-width="200"
      :label-position="'top'"
    >
      <el-form-item prop="bankid" :label="t('withdrawalaccount')">
        <el-select
          class="select"
          v-model="ruleForm.bankid"
          :placeholder="t('pleaseselectwithdrawalaccount')"
          size="large"
        >
          <el-option
            v-for="item in bank"
            :key="item.bank_account"
            :label="item.bank_account"
            :value="item.bankid"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="cash" :label="t('withdrawalamount')">
        <el-input
          v-model="ruleForm.cash"
          size="large"
          :placeholder="t('pleaseenterthewithdrawalamount')"
        />
      </el-form-item>
      <el-form-item style="margin: 0">
        <p style="text-align: right; color: #ccc; width: 100%" class="size12">
          {{ t('Withdrawableamount') }} ：{{ balance.balance || 0 }} NT
        </p>
      </el-form-item>

      <el-form-item>
        <el-button
          v-loading="loading"
          class="btn btnbg"
          @click="submitForm(refruleForm)"
          size="large"
          >{{ t('Confirmpickup') }}</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 签名 -->
    <el-dialog
      v-model="dialogForm"
      :title="t('Pleasesign')"
      width="600"
      :close-on-click-modal="false"
      destroy-on-close
    >
      <div style="height: 300px">
        <signature ref="Signature"></signature>
      </div>
      <template #footer>
        <el-button plain @click="cancellation">{{ t('rewrite') }}</el-button>
        <el-button class="btnbg" @click="confirm">{{ t('SubmitSignature') }}</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
import { ElMessage } from 'element-plus'
import signature from '@/components/signature.vue'
const Signature = ref()
const dialogForm = ref(false)
const cancellation = () => {
  Signature.value.reWrite()
}
import { reactive, ref, onMounted, getCurrentInstance } from 'vue'
const loading = ref(false)
const { proxy } = getCurrentInstance()
const refruleForm = ref(null) //表单验证
const value = ref('')

const options = []
const rules = reactive({
  bankid: [
    {
      required: true,
      message: t('pleaseselectwithdrawalaccount'),
      trigger: 'blur',
    },
  ],
  cash: [
    {
      required: true,
      message: t('pleaseenterthewithdrawalamount'),
      trigger: 'blur',
    },
  ],
})
const ruleForm = reactive({
  cash: '',
  bankid: '',
  signupdata: '',
  note: '',
}) //表单
// 签字
const confirm = () => {
  Signature.value.submitSignature()
  ruleForm.signupdata = Signature.value.imgSrc
  withdrawapisave()
}

// 点击确认按钮 去签字
const submitForm = async (formEl) => {
  await formEl.validate((valid, fields) => {
    if (valid) {
      dialogForm.value = true
    } else {
    }
  })
}
// 提交提现
const withdrawapisave = () => {
  loading.value = true
  proxy
    .$post('/finance/withdrawalapi/withdrawapisave', ruleForm)
    .then((res) => {
      ElMessage({
        message: res.msg,
        type: 'success',
      })
      loading.value = false
      dialogForm.value = false
    })
    .catch((res) => {
      loading.value = false
      dialogForm.value = false
    })
}
// 获取可提现金额
const balance = ref({})
const withdrawalapi = () => {
  proxy
    .$post('/finance/withdrawalapi/withdrawalapi', {})
    .then((res) => {
      balance.value = res.data
    })
    .catch((res) => {})
}
// 获取银行卡
const bank = ref([])
const bankvalue = ref('')
const title = ref('')
const name = ref('')
const banksapi = () => {
  proxy
    .$post('/finance/withdrawalapi/banksapi', {})
    .then((res) => {
      let arry = []
      res.data.forEach((item, index) => {
        if (item.bank_auth_status == 2) {
          arry.push(item)
          SetIndex()
        }
      })
      bank.value = arry
    })
    .catch((res) => {})
}
const SetIndex = () => {
  bank.value.forEach((item, index) => {
    if (item.isdefault == 1) {
      bankvalue.value = index
      ruleForm.bankid = item.bankid
      title.value = item.bank_name
      name.value = item.bank_account.substring(item.bank_account.length - 4, item.bank_account)
    }
  })
  if (ruleForm.bankid) {
    var item = bank.value[0]
    bankvalue.value = 0
    ruleForm.bankid = item.bankid
    title.value = item.bank_name
    name.value = item.bank_account.substring(item.bank_account.length - 4, item.bank_account)
  }
}
//
onMounted(() => {
  banksapi()
  withdrawalapi()
})
</script>

<style scoped lang="scss">
@import '../../../style/scss/payApply.scss';
</style>
